<template>
	<view v-if="is_init">
		<uni-popup-input name="新增/编辑" @close="on_close">

			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					分类
				</view>
				<view class="banmi_input_val">
					<uni-data-select @change="change_category_id" :value="find.category_id"
						:localdata="localdata_category_id">
					</uni-data-select>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>城市
				</view>
				<view class="banmi_input_val">
					<uni-data-picker @change="confirm_city" :value="find.city" :localdata="provinceData">
					</uni-data-picker>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>标题
				</view>
				<view class="banmi_input_val">
					<uni-easyinput v-model="find.title" placeholder="请输入标题">
					</uni-easyinput>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					图片
				</view>
				<view class="banmi_input_val">
					<upImg ref="upimg" :val='1' name="图片" :count="1" :list="find.img" t_type="images"
						@confirm="confirm_img">
					</upImg>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					视频
				</view>
				<view class="banmi_input_val">
					<upImg ref="upimg" :val='1' name="视频" :count="1" :list="find.video" t_type="video"
						@confirm="confirm_video">
					</upImg>
				</view>
			</view>

			<view class="banmi_input_edit banmi_flex a-c">
				<view class="banmi_input_edit_name">
					是否上架
				</view>
				<view @click="confirm_open(find.open)">
					<banmi-switch :is_state="find.open" is_type='0'></banmi-switch>
				</view>
			</view>
			<view class="p-b-20">
				<view class="f-16 c-7" style="width: 150px;height: 40px;"><text class="cred">*</text>内容</view>
				<view class="p2 " style="width: 95%;border: solid 2rpx #c0c0c0;">
					<BmEditor @change="confirm_content" :content="find.content" mode="default" :height="500"
						placeholder="请输入内容"> </BmEditor>
				</view>
			</view>


			<view class="a-c  p-b-20 banmi_input_edit">
				<view class="banmi_input_edit_name">
				</view>
				<view class="">
					<button @click="on_sava()" type="primary" style="width: 80px;" size="mini">保存</button>
				</view>
			</view>

		</uni-popup-input>
		<!-- 	颜色选择器 -->
		<t-color-picker ref="colorPicker" @confirm="confirm_color"></t-color-picker>
	</view>
</template>

<script>
	import provinceData from '@/components/fd-picker/city-china.json';

	export default {
		components: {},
		props: {

		},
		data() {
			return {
				find: {},

				is_init: false,
				nav_list: [],
				img_url: '',
				arr_val: [{
						"value": '1',
						"text": "按钮1",
					},
					{
						"value": "2",
						"text": "按钮2",
					},
					{
						"value": "3",
						"text": "按钮3",
					},
				],
				provinceData: provinceData, //本地省市区数据 
				screenWidth: 0,
				localdata_category_id: [],
			}
		},

		methods: {
			init_category_id() {
				var that = this;
				let requestParams = {};
				this.Http.post('banmichaoqiangbizhi/admin/Article/class_category_id', requestParams).then(ret => {
					if (ret.status == 200) {
						var old_list = ret.data.list;
						var list = [];
						for (var i = 0; i < old_list.length; i++) {
							var find = {
								text: old_list[i]['name'],
								value: old_list[i]['id'],
							}
							list.push(find);
						}
						this.localdata_category_id = list;
					}
				})
			},

			change_category_id(e) {
				this.find.category_id = e;
			},
			confirm_city(e) {
				//省
				this.find.province = e.detail['value'][0]['text']
				//市
				this.find.city = e.detail['value'][1]['text']
				//县
				this.find.county = e.detail['value'][2]['text']

			},
			confirm_img(vals) {
				if (vals.length == 0) {
					this.find.img = ''
					return
				}
				this.find.img = vals[0]['attachment']
			},
			confirm_video(vals) {
				let _this = this;
				if (vals.length == 0) {
					this.find.video = ''
					return
				}
				this.find.video = vals[0]['attachment']
			},
			change_file(val) {
				this.find.file = val
			},
			confirm_open(val) {
				if (val == 1) {
					this.find.open = 0
					return
				}
				this.find.open = 1
			},
			confirm_content(val) {
				this.find.content = val;
			},
			on_sava() {
				var that = this;
				this.find.id = this.id
				this.Http.post('banmichaoqiangbizhi/admin/Article/edit', this.find).then(ret => {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
					if (ret.status == 200) {
						this.$emit("confirm");
						this.on_close();
					}
				})
			},
			init(id) {
				this.init_category_id();
				var that = this;
				that.id = id
				if (that.id == 0) {
					this.find = {
						category_id: '',
						city: '',
						title: '',
						img: '',
						video: '',
						file: '',
						open: 1,
						content: '',
						userip: '',
					};

					this.is_init = true;
					return
				}
				let requestParams = {
					id: that.id,
				};
				this.Http.post('banmichaoqiangbizhi/admin/Article/views', requestParams).then(ret => {
					if (ret.status == 200) {
						this.find = ret.data.find;
						this.is_init = true;
						return
					}
					uni.showToast({
						title: ret.msg,
						duration: 2000,
						icon: 'error'
					});
				})
			},

			on_close() {
				this.find = {};
				this.is_init = false;
			},
			//js分类方法

		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}
</style>